<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
    :footer="null"
    wrapClassName="ant-modal-cust-warp"
    style="top: 20px;">
    
    <a-spin :spinning="confirmLoading">
      <!-- 物料信息提示 -->
      <a-alert v-if="materialInfo.materialCode" type="info" style="margin-bottom: 16px;">
        <template slot="message">
          <div>
            <strong>物料信息：</strong>
            {{ materialInfo.materialCode }} - {{ materialInfo.materialName }}
            <template v-if="materialInfo.specification">，规格：{{ materialInfo.specification }}</template>
            <template v-if="materialInfo.color">，颜色：{{ materialInfo.color }}</template>
          </div>
        </template>
      </a-alert>
      
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item label="物料类型">
                <j-dict-select-tag
                  v-model="queryParam.materialType"
                  dictCode="material_type"
                  placeholder="请选择物料类型"
                  @change="handleMaterialTypeChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="物料">
                <j-select-material
                  v-model="queryParam.materialCode"
                  placeholder="请选择物料"
                  @change="handleMaterialChange"
                  :type="materialType"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="业务类型">
                <j-dict-select-tag v-model="queryParam.businessType" dictCode="inventory_business_type" placeholder="请选择业务类型"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="业务单号">
                <a-input placeholder="请输入业务单号" v-model="queryParam.businessNo"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="操作人">
                <a-input placeholder="请输入操作人" v-model="queryParam.operator"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="10" :sm="12">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button style="margin-left: 8px" @click="searchReset" icon="reload">重置</a-button>
                <a-button type="primary" style="margin-left: 8px" @click="handleExport" icon="download">导出</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      
      <!-- 表格区域 -->
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">
        
        <template slot="businessTypeSlot" slot-scope="text">
          <j-dict-label :value="text" dictCode="inventory_business_type"/>
        </template>
      </a-table>
    </a-spin>
    
  </a-modal>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import JDictLabel from '@/components/dict/JDictLabel'
  import JSelectMaterial from '@/components/jeecgbiz/JSelectMaterial'
  import { getAction, downFile } from '@/api/manage'
  import moment from 'moment'
  
  export default {
    name: 'InventoryHistoryModal',
    mixins: [JeecgListMixin],
    components: {
      JDictSelectTag,
      JDictLabel,
      JSelectMaterial
    },
    data() {
      return {
        title: '库存历史记录',
        visible: false,
        confirmLoading: false,
        materialInfo: {},
        materialType: '',
        queryParam: {
          materialCode: '',
          materialType: '',
          warehouseId: '',
          locationId: '',
          businessType: '',
          businessNo: '',
          operator: '',
          beginDate: '',
          endDate: ''
        },
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '物料编号',
            align: 'center',
            dataIndex: 'materialCode',
            width: 120
          },
          {
            title: '物料名称',
            align: 'center',
            dataIndex: 'materialName',
            width: 150
          },
          {
            title: '仓库',
            align: 'center',
            dataIndex: 'warehouseName',
            width: 120
          },
          {
            title: '库位',
            align: 'center',
            dataIndex: 'locationName',
            width: 120
          },
          {
            title: '业务类型',
            align: 'center',
            dataIndex: 'businessType',
            width: 100,
            scopedSlots: { customRender: 'businessTypeSlot' }
          },
          {
            title: '业务单号',
            align: 'center',
            dataIndex: 'businessNo',
            width: 150
          },
          {
            title: '变更前数量',
            align: 'center',
            dataIndex: 'beforeQuantity',
            width: 100
          },
          {
            title: '变更数量',
            align: 'center',
            dataIndex: 'changeQuantity',
            width: 100
          },
          {
            title: '变更后数量',
            align: 'center',
            dataIndex: 'afterQuantity',
            width: 100
          },
          {
            title: '批次号',
            align: 'center',
            dataIndex: 'batchNo',
            width: 120
          },
          {
            title: '操作人',
            align: 'center',
            dataIndex: 'operator',
            width: 100
          },
          {
            title: '操作时间',
            align: 'center',
            dataIndex: 'operateTime',
            width: 150
          }
        ],
        url: {
          list: '/wms/inventoryHistory/list',
          exportXlsUrl: '/wms/inventoryHistory/exportXls'
        }
      }
    },
    methods: {
      show(record) {
        this.visible = true
        this.materialInfo = {}
        this.materialType = ''
        this.queryParam = {
          materialCode: '',
          materialType: '',
          warehouseId: '',
          locationId: '',
          businessType: '',
          businessNo: '',
          operator: '',
          beginDate: '',
          endDate: ''
        }
        
        // 如果传入了记录，则是从列表点击查看历史
        if (record) {
          this.materialInfo = {
            materialCode: record.materialCode,
            materialName: record.materialName,
            specification: record.specification,
            color: record.color
          }
          this.materialType = record.materialType
          
          this.queryParam.materialCode = record.materialCode
          this.queryParam.materialType = record.materialType
          this.queryParam.warehouseId = record.warehouseId
          this.queryParam.locationId = record.locationId
          
          this.loadData(1)
        }
      },
      
      handleCancel() {
        this.visible = false
      },
      
      handleMaterialTypeChange(value) {
        this.materialType = value
        // 清空物料相关字段
        this.queryParam.materialCode = ''
        this.materialInfo = {}
      },
      
      handleMaterialChange(value, materials) {
        if (materials && materials.length > 0) {
          const material = materials[0]
          this.materialInfo = material
        } else {
          this.materialInfo = {}
        }
      },
      
      handleExport() {
        let params = { ...this.queryParam }
        
        // 格式化日期
        if (params.beginDate) {
          params.beginDate = moment(params.beginDate).format('YYYY-MM-DD')
        }
        if (params.endDate) {
          params.endDate = moment(params.endDate).format('YYYY-MM-DD')
        }
        
        // 调用导出接口
        this.loading = true
        downFile(this.url.exportXlsUrl, params).then(data => {
          if (!data) {
            this.$message.warning("文件下载失败")
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), '库存历史记录.xls')
          } else {
            let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', '库存历史记录.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) // 下载完成移除元素
            window.URL.revokeObjectURL(url) // 释放掉blob对象
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
</script>

<style scoped>
</style> 